<script lang="ts" name="person-new" setup>
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from "vue";

let sum = ref(0)

function add () {
  sum.value += 1
}

//生命周期

//创建
console.log('创建====>setup')
//挂载前
onBeforeMount(() => {
  console.log('onBeforeMount是手动调用的,其实调用的是这个箭头函数')
})
//挂载完毕
onMounted(() => {
  console.log('子====>挂载完毕')
  //子先挂载完毕然后 app开始挂载(永远是最后开始挂载的)
})
//更新前
onBeforeUpdate(() => {
  console.log('更新前')
})
//更新完毕
onUpdated(() => {
  console.log('更新完毕')
})

//卸载前
onBeforeUnmount(() => {
  console.log('卸载前')
})
//卸载完毕
onUnmounted(() => {
  console.log('卸载完毕')
})
</script>

<template>
  <div class="person">
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="add">点我sum+1</button>
  </div>
</template>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>